<template>
  <el-row>
    <el-col :span="4">
      <div class="box">
        <el-scrollbar>
          <basic-container>
            <avue-tree :option="treeOption" :data="treeData"  @node-click="nodeClick" :defaultExpandAll="true" />
          </basic-container>
        </el-scrollbar>
      </div>
    </el-col>
    <el-col :span="20">
      <el-tabs type="border-card" @tab-click="tabHandleClick">

        <el-tab-pane label="课表">
          <basic-container>
<!--            <el-button type="primary" icon="el-icon-print" size="small" @click="printKb"  style="margin-left: 10px">打印课表</el-button>-->
            <div id="coursesTable" ></div>
          </basic-container>
        </el-tab-pane>
        <el-tab-pane label="学生">
          <xspanel v-bind:bjId="bjId" ref="xsList"></xspanel>
        </el-tab-pane>
        <el-tab-pane label="作业">
          <jobpanel v-bind:bjId="bjId" ref="jobList"></jobpanel>
        </el-tab-pane>
        <el-tab-pane label="请假">
          <qjinitpanel v-bind:bjId="bjId" ref="qjList"></qjinitpanel>
        </el-tab-pane>
        <el-tab-pane label="家访">
          <jfpanel v-bind:bjId="bjId" ref="jfList"></jfpanel>
        </el-tab-pane>
        <el-tab-pane label="成绩">
          <xsdacjpanel v-bind:bjId="bjId" ref="cjList"></xsdacjpanel>
        </el-tab-pane>
        <el-tab-pane label="荣誉">
          <xsdarychpanel v-bind:bjId="bjId" ref="ryList"></xsdarychpanel>
        </el-tab-pane>
        <el-tab-pane label="健康">
          <xsdajkdapanel v-bind:bjId="bjId" ref="jkList"></xsdajkdapanel>
        </el-tab-pane>

      </el-tabs>

    </el-col>
  </el-row>
</template>

<script>
import {getBjTree} from "@/api/service/org";
import {getKebiao} from "@/api/service/bjkcsort";
import Timetables from "timetables";
import {getStore} from "@/util/store";


import xspanel from "@/views/service/xspanel";

import jobpanel from "@/views/service/jobpanel";

import qjinitpanel from "@/views/service/qjinitpanel";

import jfpanel from "@/views/service/jfpanel";

import xsdacjpanel from "@/views/service/xsdacjpanel";

import xsdarychpanel from "@/views/service/xsdarychpanel";

import xsdajkdapanel from "@/views/service/xsdajkdapanel";
// import Jobpanel from "@/views/service/jobpanel";


var timetables = [
  ['','','','','','','','','','','',''],
  ['','','','','','','','','','','',''],
  ['','','','','','','','','','','',''],
  ['','','','','','','','','','','',''],
  ['','','','','','','','','','','',''],
  ['','','','','','','','','','','',''],
  ['','','','','','','','','','','',''],
];


const highlightWeek = new Date().getDay();

export default {
  components:{
    jobpanel,
    xspanel,
    qjinitpanel,
    jfpanel,
    xsdajkdapanel,
    xsdarychpanel,
    xsdacjpanel
  }
  ,
  name: "wdbj",
  data(){
    return{
      tt:false,
      tp:'课表',
      bjId:'0',
      treeData: [],
      treeOption: {
        nodeKey: 'id',
        lazy: false,
        addBtn: false,
        menu: false,
        size: 'small',
        defaultExpandAll:true,
        props: {
          labelText: '标题',
          label: 'title',
          value: 'value',
          children: 'children'
        }
      },
    }
  },
  mounted() {
    var userinfo = getStore({
      name: "userInfo",
    });
    getBjTree({jsId:userinfo.relateId}).then(res => {
      this.treeData = res.data.data;
      this.initKebiao([]);
    });
  },

  methods: {
    tabHandleClick(tab, event){
      console.log(event)
      this.tp = tab.label;
      if(tab.label=='课表'){
        getKebiao({bjId:this.bjId}).then(res=>{
          timetables = [
            ['','','','','','','','','','','',''],
            ['','','','','','','','','','','',''],
            ['','','','','','','','','','','',''],
            ['','','','','','','','','','','',''],
            ['','','','','','','','','','','',''],
            ['','','','','','','','','','','',''],
            ['','','','','','','','','','','',''],
          ];
          this.initKebiao(res.data.data);
        });

      }
      if(tab.label=='学生'){
        this.$refs.xsList.onLoad({
          currentPage:1,
          pageSize:10
        },{
          bjId:this.bjId
        });
      }
      if(tab.label=='作业'){
        this.$refs.jobList.onLoad({
          currentPage:1,
          pageSize:10
        },{
          bjId:this.bjId
        });
      }
      if(tab.label=='请假'){
        this.$refs.qjList.onLoad({
          currentPage:1,
          pageSize:10
        },{
          bjId:this.bjId
        });
      }
      if(tab.label=='家访'){
        this.$refs.jfList.onLoad({
          currentPage:1,
          pageSize:10
        },{
          jfXsBj:this.bjId
        });
      }
      if(tab.label=='成绩'){
        this.$refs.cjList.onLoad({
          currentPage:1,
          pageSize:10
        },{
          bjId:this.bjId
        });
      }
      if(tab.label=='荣誉'){
        this.$refs.ryList.onLoad({
          currentPage:1,
          pageSize:10
        },{
          bjId:this.bjId
        });
      }
      if(tab.label=='健康'){
        this.$refs.jkList.onLoad({
          currentPage:1,
          pageSize:10
        },{
          bjId:this.bjId
        });
      }
    },
    printKb(){
      this.$Print('#coursesTable');
    },
    nodeClick(data){
      this.bjId = data.id;

      if(this.tp=='课表') {
            getKebiao({bjId:data.id}).then(res=>{
              timetables = [
                ['','','','','','','','','','','',''],
                ['','','','','','','','','','','',''],
                ['','','','','','','','','','','',''],
                ['','','','','','','','','','','',''],
                ['','','','','','','','','','','',''],
                ['','','','','','','','','','','',''],
                ['','','','','','','','','','','',''],
              ];
              this.initKebiao(res.data.data);
            });
      }
      if(this.tp=='学生'){
        this.$refs.xsList.onLoad({
          currentPage:1,
          pageSize:10
        },{
          bjId:this.bjId
        });
      }
      if(this.tp=='作业'){
        this.$refs.jobList.onLoad({
          currentPage:1,
          pageSize:10
        },{
          bjId:this.bjId
        });
      }
      if(this.tp=='请假'){
        this.$refs.qjList.onLoad({
          currentPage:1,
          pageSize:10
        },{
          bjId:this.bjId
        });
      }
      if(this.tp=='家访'){
        this.$refs.jfList.onLoad({
          currentPage:1,
          pageSize:10
        },{
          jfXsBj:this.bjId
        });
      }
      if(this.tp=='成绩'){
        this.$refs.cjList.onLoad({
          currentPage:1,
          pageSize:10
        },{
          bjId:this.bjId
        });
      }
      if(this.tp=='荣誉'){
        this.$refs.ryList.onLoad({
          currentPage:1,
          pageSize:10
        },{
          bjId:this.bjId
        });
      }
      if(this.tp=='健康'){
        this.$refs.jkList.onLoad({
          currentPage:1,
          pageSize:10
        },{
          bjId:this.bjId
        });
      }
    },
    initKebiao(list){
      for(var i in list){
        var kc = list[i];
        var z = Number(kc.kcZhou)-1;
        var j = Number(kc.kcJie)-1;
        var n = kc.kcJieNum;
        timetables[z][j]=kc.kcName;
        if(n>1){
          for(var ii=1;ii<n;ii++){
            j = j+1;
            timetables[z][j]=kc.kcName;
          }
        }
      }
      if(this.tt){
        this.tt.setOption({
          timetables: timetables,
          highlightWeek: highlightWeek,
          merge:false,
          week: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
          timetableType: [
            ['上午', 4],
            ['下午', 4],
            ['晚上', 4]

          ],
          gridOnClick: function (e) {
            console.log(e.name + '  ' + e.week +', 第' + e.index + '节课, 课长' + e.length +'节')
          },
        })
      }else{
        this.tt = new Timetables({
          el: '#coursesTable',
          timetables: timetables,
          highlightWeek: highlightWeek,
          merge:false,
          week: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
          timetableType: [
            ['上午', 4],
            ['下午', 4],
            ['晚上', 4]
          ],
          gridOnClick: function (e) {
            console.log(e.name + '  ' + e.week +', 第' + e.index + '节课, 课长' + e.length +'节')
          },
        });
      }

    }
  }
}
</script>

<style>
#coursesTable {
  padding: 15px 10px;
}

.Courses-head > div {
  text-align: center;
  font-size: 14px;
  line-height: 28px;
}

.left-hand-TextDom, .Courses-head {
  background-color: #f2f6f7;
}

.Courses-leftHand {
  background-color: #f2f6f7;
  font-size: 12px;
}

.Courses-leftHand .left-hand-index {
  color: #9c9c9c;
  margin-bottom: 4px !important;
}

.Courses-leftHand p {
  text-align: center;
  font-weight: 900;
}

.Courses-leftHand > div {
  padding-top: 5px;
  border-bottom: 1px dashed rgb(219, 219, 219);
}

.Courses-leftHand > div:last-child {
  border-bottom: none !important;
}

.left-hand-TextDom, .Courses-head {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
}

.Courses-content > ul {
  border-bottom: 1px dashed rgb(219, 219, 219);
  box-sizing: border-box;
}

.Courses-content > ul:last-child {
  border-bottom: none !important;
}

.highlight-week {
  color: #02a9f5 !important;
}

.Courses-content li {
  text-align: center;
  color: #fff;
  font-size: 14px;
  line-height: 50px;
}

.stage_1, .left-hand-1 {
  /*background-color: #FF6666;*/
}

.stage_2, .left-hand-2 {
  /*background-color: #3399CC;*/
}

.stage_3, .left-hand-3 {
  /*background-color: #66CCCC;*/
}

.Courses-leftHand {
  border-right: 1px solid #e0e0e0;
  color: #303133;
}

.Courses-leftHand > div {
  writing-mode: vertical-lr;
  text-align: center;
  line-height: 50px;
  font-size: 16px;
  letter-spacing: 10px;
}
</style>
